<template>
<el-container class="container">
  <div class="scroll">
    <span>
      {{nowDate}} 千岛湖景区中心湖区日最大承载量{{day_total_num}}人，瞬时承载量{{total_num}}人，今日下湖游客{{check_num}}人。今天天气{{weatherName}}，气温{{temp_low}}-{{temp_high}}度，景区游玩指数{{comfort_name}}.
      {{nowDate}} 千岛湖景区中心湖区日最大承载量{{day_total_num}}人，瞬时承载量{{total_num}}人，今日下湖游客{{check_num}}人。今天天气{{weatherName}}，气温{{temp_low}}-{{temp_high}}度，景区游玩指数{{comfort_name}}.
    </span>
  </div>
</el-container>
</template>

<script>
import { weatherListInfo,qdh_cur_day_total_num,real_time_num } from "@/api/item";


export default {
  name: "item",
  data() {
    return {
      day_total_num:59749,
      total_num:34181,
      check_num:0,
      temp_low:35,
      temp_high:39,
      comfort_name:'舒适',
      weatherName:'多云',
      nowDate:'00-00-00 00:00:00',
      date:''
    };
  },
  created(){
        this.formatDate()
        this.getWeatherListInfo()
        this.qdhCurDayTotalNum()
        this.realTimeNum()
  },
  mounted () {
      this.currentTime()
    },
  methods: {
    // 获取时间
    currentTime () {
      setInterval(this.formatDate, 500)
      setInterval(this.getWeatherListInfo, 3*60*1000)
      setInterval(this.qdhCurDayTotalNum, 2*60*1000)
      setInterval(this.realTimeNum, 1*60*1000)
    },
    formatDate () {
      let time = new Date()
      let year = time.getFullYear()
      const month = (time.getMonth() + 1).toString().padStart(2,'0')
      const  date = (time.getDate()).toString().padStart(2,'0')
      const hours = (time.getHours()).toString().padStart(2,'0')
      const minute = (time.getMinutes()).toString().padStart(2,'0')
      const second = (time.getSeconds()).toString().padStart(2,'0')
      this.nowDate = year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
      this.date=year + '-' + month + '-' + date
    },
    getWeatherListInfo() {
      weatherListInfo().then(res => {
        console.log(res)
        if(res.success){
            let data=res.result.list[0]
            console.log(data)
            this.weatherName=data.weatherName
            this.temp_low=data.temp_low
            this.temp_high=data.temp_high
        }
      });
    },
    qdhCurDayTotalNum() {
      qdh_cur_day_total_num().then(res => {
        console.log(res)
        if(res.success){
          var list=res.result.list;
          for(var data in list){
            if(data.scenic_name=='中心湖区'){
              this.day_total_num=data.day_total_num
              this.total_num=data.total_num
              this.comfort_name=data.comfort_name
            }
          }
            //this.check_num=data.check_num
        }
      });
    },
    realTimeNum() {
      real_time_num().then(res => {
         console.log(res)
         if(res.success){
          let data=res.result.list[0]
          this.check_num=data.checkNum
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.container{
    display: flex;
    flex-direction:column;
}
  .scroll{
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    background-color: #000000;
    color:red;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #000000;
  }
  .scroll span{
    display: inline-block;
    animation: scroll 26s linear infinite;
  }
  .scroll span:after{
    content:attr(data-text);
    margin-left:4em;
  }
  @keyframes scroll{
    from{
      transform: translateX(0);
    }
    to{
      transform: translateX(calc(-50% - 2em));
    }
  }
</style>
